<template>
  <div class="f_div">
    <div class="t_div">
      设置 / 部门管理 / <a href="#">{{ name }}</a>
    </div>
    <el-container>
      <el-header class="header"
        ><div class="h_div">
          <div class="h_in_vid">部门信息</div>
        </div></el-header
      >
      <el-main class="main">
        <el-form
          style="max-width: 600px"
          :model="ruleForm"
          label-width="auto"
          ref="ruleFormRef"
          :rules="rules"
          status-icon
        >
          <el-form-item label="部门编码" prop="depart_code">
            <el-input
              v-model="ruleForm.depart_code"
              style="width: 240px"
              class="form_content"
              :disabled="disabled"
            />
          </el-form-item>
          <el-form-item label="部门名称" prop="depart_name">
            <el-input
              v-model="ruleForm.depart_name"
              style="width: 240px"
              class="form_content"
            />
          </el-form-item>
          <el-form-item label="上级部门" prop="depart_pid">
            <el-input
              v-model="ruleForm.depart_pid"
              style="width: 240px"
              class="form_content"
              :readonly="true"
              @click="centerDialogVisible = true"
            >
            </el-input>
            <el-dialog
              v-model="centerDialogVisible"
              title="部门选择"
              width="500"
              align-center
            >
              <span
                ><el-tree
                  style="max-width: 600px"
                  :data="data"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
              /></span>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="centerDialogVisible = false"
                    >关闭</el-button
                  >
                  <el-button
                    type="primary"
                    @click="centerDialogVisible = false"
                  >
                    确定
                  </el-button>
                </div>
              </template>
            </el-dialog>
          </el-form-item>
          <el-form-item label="显示顺序" prop="num_order">
            <el-input
              v-model="ruleForm.num_order"
              style="width: 240px"
              class="form_content"
            />
          </el-form-item>
          <el-form-item label="创建人" prop="create_by">
            <el-input
              v-model="ruleForm.create_by"
              style="width: 240px"
              class="form_content"
              :disabled="disabled"
            />
          </el-form-item>
          <el-form-item label="备注" prop="depart_remark">
            <el-input
              v-model="ruleForm.depart_remark"
              style="width: 240px"
              class="form_content"
            />
          </el-form-item>
          <el-form-item label="部门状态" prop="depart_status">
            <el-switch v-model="ruleForm.depart_status" class="form_content" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import { onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import $http from "@/axios/base";
import { getRandomString } from "@/randomString/random.js";
import { ElMessage } from "element-plus";
export default {
  name: "app",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const name = ref("");
    const ruleFormRef = ref(null);
    const disabled = ref(true);
    const centerDialogVisible = ref(false);
    const defaultProps = {
      children: "children",
      label: "depart_name",
    };
    const data = ref();
    const ruleForm = reactive({
      depart_id: 0, //部门id
      depart_code: "", // 部门编码
      depart_name: "", // 部门名称
      depart_pid: "", // 上级部门
      num_order: 0, // 显示顺序
      comp_id: 0, //公司id
      create_by: sessionStorage.getItem("empname"), // 创建人
      create_time: new Date().toISOString().slice(0, 10).toString(), //创建时间
      depart_remark: "", // 备注
      depart_status: true, // 部门状态
      children: "",
      is_del: 0,
      update_by: "",
      update_time: "",
    });
    const pid = ref();
    const rules = ref({
      depart_name: [
        { required: true, message: "请输入部门名称", trigger: "blur" },
        { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
      ],
      depart_pid: [
        { required: true, message: "请选择上级部门", trigger: "change" },
      ],
      num_order: [
        { required: true, message: "请输入显示顺序", trigger: "blur" },
        { pattern: /^\d+$/, message: "显示顺序必须为数字", trigger: "blur" },
      ],
      depart_remark: [
        { max: 50, message: "长度不超过 50 个字符", trigger: "blur" },
      ],
    });

    //提交
    const onSubmit = () => {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          ruleForm.depart_status = ruleForm.depart_status == true ? 0 : 1;
          ruleForm.depart_pid = pid.value;
          if (ruleForm.depart_id != 0) {
            ruleForm.update_by = sessionStorage.getItem("empname");
            ruleForm.update_time = new Date()
              .toISOString()
              .slice(0, 10)
              .toString();
            $http
              .put(
                `http://localhost:5261/api/Depart/UpdDepart/register`,
                ruleForm
              )
              .then((res) => {
                if (res) {
                  ElMessage.success("修改成功！！！");
                  setTimeout(() => {
                    router.push("/Depart");
                  }, 500);
                }
              })
              .catch((err) => console.log(err));
          } else {
            $http
              .post(
                `http://localhost:5261/api/Depart/AddDepart/register`,
                ruleForm
              )
              .then((res) => {
                if (res) {
                  ElMessage.success("添加成功！！！");
                  setTimeout(() => {
                    router.push("/Depart");
                  }, 500);
                }
              })
              .catch((err) => console.log(err));
          }
        } else {
          ElMessage.warning("请填写完整信息！");
        }
      });
    };

    const getcode = () => {
      $http
        .get("http://localhost:5261/api/BH/BHGZ", {
          params: {
            prefix: "BM",
          },
        })
        .then((res) => {
          ruleForm.depart_code = res;
        })
        .catch((err) => console.log(err));
    };

    //取消
    const cancel = () => {
      router.push("Depart");
    };

    //展示
    function show(id) {
      $http
        .get(`http://localhost:5261/api/Depart/GetById/${id}`)
        .then((res) => {
          ruleForm.comp_id = res.comp_id;
          ruleForm.depart_code = res.depart_code;
          ruleForm.depart_id = res.depart_id;
          ruleForm.depart_name = res.depart_name;
          ruleForm.depart_pid = res.depart_pid;
          ruleForm.depart_remark = res.depart_remark;
          ruleForm.depart_status = res.depart_status == 0 ? true : false;
          ruleForm.num_order = res.num_order;
          pid.value = res.depart_pid;
          if (ruleForm.depart_pid == 0) getbyCompId();
          getById();
        })
        .catch((err) => console.log(err));
    }

    const getById = () => {
      $http
        .get(`http://localhost:5261/api/Depart/GetById/${ruleForm.depart_pid}`)
        .then((res) => {
          ruleForm.depart_pid = res.depart_name;
        })
        .catch((err) => console.log(err));
    };

    const getbyCompId = () => {
      $http
        .get(`http://localhost:5261/api/Depart/GetByCompId/${1}`)
        .then((res) => {
          console.log(res);
          ruleForm.depart_pid = res.comp_name;
        })
        .catch((err) => console.log(err));
    };

    const getDepart = () => {
      $http
        .get(`http://localhost:5261/api/Depart/GetDepart`)
        .then((res) => {
          data.value = res;
        })
        .catch((err) => console.log(err));
    };

    const handleNodeClick = (data) => {
      ruleForm.comp_id = data.comp_id;
      pid.value = data.depart_id;
      ruleForm.depart_pid = data.depart_name;
    };

    onMounted(() => {
      name.value = route.query.name;
      var id = route.query.id;
      getcode();
      getDepart();
      if (id != 0) show(id);
    });

    return {
      name,
      data,
      show,
      rules,
      getcode,
      disabled,
      ruleForm,
      ruleFormRef,
      defaultProps,
      handleNodeClick,
      centerDialogVisible,
      onSubmit,
      cancel,
    };
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 50px;
  background-color: #006eff;
}

.el-radio-group {
  margin-right: 12px;
}
.t_div {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: #b3b4b6;
}
a {
  text-decoration: none;
}
.f_div {
  padding: 0px 50px;
}
.h_div {
  border-bottom: 1px solid #f2f2f2;
  height: 39px;
}
.h_in_vid {
  width: 100px;
  height: 20px;
  margin-top: 20px;
  border-left: 5px solid #006eff;
}
.header {
  background-color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}
.main {
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
  height: 750px;
}
.form_content {
  margin-left: 50px;
}
</style>